<route lang="json5">
{
  meta: {
    // layout: 'Empty',
    auth: true,
    label: '写点啥呢',
  },
}
</route>
<template>
  <div class="h-full w-full overflow-y-scroll px-12">
    {{ status }}
    <a-button @click="send('test')">SEND</a-button>

    <use-label text="使用组件" />
    <a-image
      width="200"
      src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp"
    />

    <use-label text="不使用组件" />
    <use-image-preview :src="'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AAOElcx.img'" class="w-64">
      <a-button>自定义组件</a-button>
    </use-image-preview>

    <!-- /> -->
  </div>
</template>

<script lang="ts" setup>
import { debounce } from 'lodash-es'

const TEST1 = 'ws://127.0.0.1:6688/echo'
const TEST2 = 'ws://127.0.0.1:6688/api/echo'
const TEST3 = 'ws://127.0.0.1:6688/api/ws/serve'

const { send, data, status } = useWebSocket(TEST1, {
  onConnected: (ws) => {
    ws.send('首次链接')
  },
  onMessage: (ws, message) => {
    console.log('接收消息：', message)
  },
  autoReconnect: {
    retries: 10,
    delay: 1000,
    onFailed() {
      console.error('ws:连接自动重连失败！')
    },
  },
})
</script>
